{% extends "base.html" %}
{% load static %}
{% load crispy_forms_tags %}

{% block title %}
    Teacher Dashboard | {{ block.super }}
{% endblock title %}

{% block stylesheets %}
    {{ block.super }}
    <!-- Custom styles for this template -->
    <link href="{% static "css/laioffer/vendor/bootstrap-switch.min.css" %}" rel="stylesheet">
    <link href="{% static "laioffer/css/dashboard.css" %}" rel="stylesheet">
    {{ form.media }}
    <style type="text/css">
    div.added {
        position: relative;
        padding-bottom: 40px;
    }
    div.added span.remove {
        font-size: 30px;
        position: absolute;
        right: 5px;
        top: 5px;
    }
    </style>
{% endblock stylesheets %}


{% block content %}
    {% if request.user.current_group == "Teacher" %}
        {% include "_teacher_sidebar.html" %}
        {% elif request.user.current_group == "Supervisor" %}
        {% include "_admin_sidebar.html" %}
        {% elif request.user.current_group == "Student" %}
        {% include "_student_sidebar.html" %}
        {% elif request.user.current_group == "Assistant" %}
        {% include "_ta_sidebar.html" %}
    {% endif %}
    <section id="main-content">
        <section class="wrapper">

            {% include "_message.html" %}
            <div class="panel">
                <div class="panel-heading">
                    {{ view.section_title }}
                </div>
                <div class="panel-body">
                    <form action="" method="post">

                        {{ form|crispy }}

                        <div id="js-problem-form-mgmt">
                            {{ formset.management_form }}
                        </div>

                        {% for problem_form in formset %}

                            {% if forloop.last %}
                                <div id="js-problem-form-last" class="well added" data-target-form="js-problem-form">
                                    {{ problem_form|crispy }}
                                </div>
                            {% else %}
                                <div class="js-problem-form well">
                                    {{ problem_form|crispy }}
                                </div>
                            {% endif %}

                        {% endfor %}

                        <div class="form-group">
                            <div class="col-lg-2">
                                <button type="button" class="btn btn-primary btn-add-another"
                                        target-form="js-problem-form">
                                    <span class="glyphicon glyphicon-plus"></span>Add another
                                </button>
                            </div>
                            <div class="col-lg-2">
                                <input type="submit" class="btn btn-primary" value="Submit">
                            </div>
                        </div>

                        {% csrf_token %}

                    </form>
                </div>
            </div>
        </section>
    </section>

{% endblock content %}

{% block javascripts %}
    {{ block.super }}
    <script type="text/javascript" src="{% static "js/laioffer/vendor/markdownx.js" %}"></script>
    <script type="text/javascript" src="{% static "js/laioffer/vendor/bootstrap-switch.min.js" %}"></script>
    <script type="text/javascript">
        $("[name='started']").bootstrapSwitch();
        function another_added(form) {
            elem = form[0];
            let mdx = new window.exports['MarkdownX'](elem, form.find('.markdownx-editor')[0], form.find('.markdownx-preview')[0]);
        }
    </script>
    <script type="text/javascript" src="{% static "laioffer/js/add_another.js" %}"></script>
{% endblock javascripts %}